<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Tween Example</title>
    <style type="text/css">
        #viewport {
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
        #block {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var tween, events;

        function init(){
            tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
            
            events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true);
            events.register("mousedown", null, moveBlock);
            
            changeTween();
        }
        function moveBlock(e) {
            var block = OpenLayers.Util.getElement('block');
            var viewport = OpenLayers.Util.getElement('viewport');
            var blockPosition = OpenLayers.Util.pagePosition(block);
            var viewportPosition = OpenLayers.Util.pagePosition(viewport);
            e.xy = events.getMousePosition(e);
            var from = {
                x: blockPosition[0] - viewportPosition[0],
                y: blockPosition[1] - viewportPosition[1]
            };
            var to = {
                x: e.xy.x,
                y: e.xy.y
            }
            var duration = OpenLayers.Util.getElement('duration').value;
            var callbacks = {
                eachStep: function(value) {
                    block.style.left = (value.x + viewportPosition[0]) + 'px';
                    block.style.top = (value.y + viewportPosition[1]) + 'px';
                }
            }
            tween.start(from, to, duration, {callbacks: callbacks});
            
        }
        function changeTween() {
            var transition = OpenLayers.Util.getElement('transition').value;
            var easing = OpenLayers.Util.getElement('easing').value;
            tween.stop();
            tween.easing = OpenLayers.Easing[transition][easing];
        }
    </script>
  </head>
  <body onload="init()">
    <div id="title">Tween Example</div>
    <div id="tags"></div>
    <div id="shortdesc">Show transition effects</div>
    <select name="transition" id="transition" onchange="changeTween()">
        <option value="Linear">Linear</option>
        <option value="Expo">Expo</option>
        <option value="Quad">Quad</option>
    </select>
    <select name="easing" id="easing" onchange="changeTween()">
        <option value="easeIn">EaseIn</option>
        <option value="easeOut">EaseOut</option>
    </select>
    <input type="text" name="duration" id="duration" value="100"></input>
    <div id="viewport">
        <div id="block"></div>
    </div>
    <div id="docs">
        This is an example of transition effects.
    </div>
  </body>
</html>